<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>02 - OL4加载天地图WMTS服务展示地图</title>
    <!-- <script src='../lib/ol4/ol4.js'></script> -->
    <script src='../lib/ol6.14.1/ol.js'></script>
    <script src='../lib/proj4/proj4.js'></script>
    <!--        <link rel="stylesheet" href="../css/ol4/ol.css">-->
    <link rel='stylesheet' href='../css/ol6.14.1/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
    <style>
        .change-btn {
            position: absolute;
            top: 20px;
            left: 100px;
        }

        .change-btn2 {
            position: absolute;
            top: 20px;
            left: 180px;
        }
    </style>
</head>
<body>
<div id='map'></div>
<button class='change-btn' onclick='onChangeStyle()'>update text</button>
<button class='change-btn2' onclick='onChangeStyle2()'>get text</button>
</body>
<script>
	const projection = ol.proj.get('EPSG:4326');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	const origin = [-180.0, 90.0];
	const size = ol.extent.getWidth(projectionExtent) / tileSize;
	let resolutions = [];
	let matrixIds = [];
	for (let z = 0; z < 19; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}

	const maxZoom = 19;
	const minZoom = 1;
	const zoom = 9;

	// resolutions = resolutions.slice(5, 15);
	// matrixIds = matrixIds.slice(5,15);

	console.log(size,resolutions);

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions,//: resolutions.slice(5, 15),
		extent: projectionExtent,
		matrixIds//: matrixIds.slice(5, 15)
	});

	const url = `http://t0.tianditu.gov.cn/vec_c/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'vec',
		matrixSet: 'c',
		format: 'tiles',
		projection,
		tileGrid,
		style: 'default',
		wrapX: false
	});
	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource
	});

	const cva_url = `http://t0.tianditu.gov.cn/cva_c/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;

	const cvaWmtsSource = new ol.source.WMTS({
		url: cva_url,
		layer: 'cva',
		matrixSet: 'c',
		format: 'tiles',
		projection,
		tileGrid,
		style: 'default',
		wrapX: false
	});
	// 图层
	const cvaBaseLayer = new ol.layer.Tile({
		source: cvaWmtsSource
	});
	// 120.0230269151, 30.2856519116
	const points = [
		[0, 0],
		[117.283042, 31.86119],
		[120.0230269151, 30.2856519116],
		[113.31584251674535, 23.142704184444145],
		[113.31581962394478, 23.142719879725917],
		[120.02194, 30.285716],
		[120.01084785859909, 30.28195143533489],
		[113.327747, 23.145871],
		[120.0230637120349, 30.286092050944973],
		[119.710112, 30.252867],
		[119.99522265, 30.37451441],
		[110.998735, 30.818967],
		[116.384722, 39.889916],
		[119.97154785156252, 30.40197483062744],
		[105.855593, 32.427233],
		[120.282129049117, 30.392968655169],
		[118.738208, 32.010466],
		[118.731778724192, 32.0035881216276],
		[118.73699118476341, 32.0015568379433],
		[120.01, 30.28],
		[106.67438968404927, 29.79884249974698],
		[120.01193105762864, 30.282179152143947],
		[110.00686213, 40.57757939]
	];
	const centerPoint = points[1];

	const imageStyle = new ol.style.Icon({
		anchor: [10, 26],
		anchorXUnits: 'pixels',
		anchorYUnits: 'pixels',
		src: '../image/icon.png',
		rotation: 30 * Math.PI / 180
	});

	/*const iconStyle = new ol.style.Style({
		image: imageStyle
	});*/

	const iconStyle = (feature) => {
		console.log('icon style');
		return new ol.style.Style({
			image: imageStyle
		});
	};

	const textStyle = new ol.style.Style({
		text: new ol.style.Text({
			font: '60px Arial',
			// @ts-ignore
			backgroundFill: new ol.style.Stroke({
				color: '#F00',
			}),
			// 文本填充样式
			fill: new ol.style.Fill({
				color: '#FF0',
			}),
			// padding: [5, 5, 5, 5],
			text: `test`,
			rotation: 0,
		}),
	});


	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(centerPoint),
	});

	// iconFeature.setStyle(textStyle);


	iconFeature.setStyle(function (feature) {
		const zoom = map.getView().getZoom();
		const font = `${zoom * 6}px Arial`;
		console.log('icon style 1', feature, zoom);
		return new ol.style.Style({
			text: new ol.style.Text({
				font,
				// @ts-ignore
				backgroundFill: new ol.style.Stroke({
					color: '#F00',
				}),
				// 文本填充样式
				fill: new ol.style.Fill({
					color: '#FF0',
				}),
				// padding: [5, 5, 5, 5],
				text: `test`,
				rotation: 0,
			}),
		});
	});

	const vectorSource = new ol.source.Vector({
		features: [iconFeature],
		wrapX: false
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource,
		// style: iconStyle
	});

	const map = new ol.Map({
		layers: [
			baseLayer,
			// cvaBaseLayer,
			iconLayer
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 8
		})
	});

	fetch('./geoJson.json').then((response) => response.json()).then((geojson) => {
		const features = new ol.format.GeoJSON().readFeatures(geojson);
		features.forEach((feature, index) => {
			// console.log(feature.get('name'));
			const styleFun = () => {
				return new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: index % 2 === 0 ? 'rgb(255,0,255,1)' : 'rgb(255,255,0,1)',
						width: 2,
					}),
					fill: new ol.style.Fill({
						color: 'rgba(142,225,255,0.6)',
					}),
					text: new ol.style.Text({
						text: feature.get('name'),
						font: '25px sans-serif',
						textAlign: 'center',
						fill: new ol.style.Fill({
							color: '#fff'
						}),
					})
				});
			};
			feature.setStyle(styleFun);
		});
		// console.log(features);
		const vectorSource = new ol.source.Vector({
			features
		});

		const layer = new ol.layer.Vector({
			source: vectorSource,
		});
		map.addLayer(layer);
	});


	let img = document.createElement('img');
	img.style.cursor = 'pointer'; //鼠标样式置为pointer
	img.src = '../image/position_orange.png';

	const overlayer = new ol.Overlay({
		element: img,
		autoPan: false,
		positioning: 'top-left',
		position: centerPoint,
		// offset: [30, 30],
		stopEvent: false //如果未设置该属性，html元素的事件无法绑定上
	});

	// map.addOverlay(overlayer);

	function onChangeStyle() {
		console.log(iconFeature.getStyle.call(iconFeature)());
		// iconFeature.getStyle().getImage().setRotation(10 * Math.PI / 180);
		// iconFeature.get('style').getImage().setRotation(10 * Math.PI / 180);
		// imageStyle.setScale(0.2);
		// iconFeature.setStyle(iconFeature.getStyle());
		/* map.render();
         console.log(iconStyle.getImage());*/

		/*const iconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [10, 50],
                anchorXUnits: 'pixels',
                anchorYUnits: 'pixels',
                src: '../image/icon1.png'
            })
        });

        iconFeature.setStyle(iconStyle);*/

		// console.log(iconFeature.getStyle().getText());
		// iconFeature.getStyle().getText().setRotation(30 * Math.PI / 180)
		// iconFeature.setStyle(iconFeature.getStyle());

		// console.log(iconFeature.getStyle().call().getText());
		// iconFeature.getStyle().call().getText().setRotation(30 * Math.PI / 180);
		// iconFeature.setStyle(iconFeature.getStyle());
		/*iconFeature.setStyle(function (feature) {
			console.log('icon style 1', feature);
			return new ol.style.Style({
				text: new ol.style.Text({
					font: '60px Arial',
					// @ts-ignore
					backgroundFill: new ol.style.Stroke({
						color: '#F00',
					}),
					// 文本填充样式
					fill: new ol.style.Fill({
						color: '#FF0',
					}),
					// padding: [5, 5, 5, 5],
					text: `test`,
					rotation: 30,
				}),
			});
		});*/
	}

	function onChangeStyle2() {
		console.log(iconFeature.getStyle().call().getText());
	}

</script>
</html>
